<template>
        <div>
            <!-- <div>商品管理</div> -->
            <el-form ref="form" :model="form" label-width="100px" :inline="true">
                <el-form-item label="添加商品时间">
                    <el-date-picker
                        v-model="arrTime"
                        value-format="yyyy-MM-dd"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        @change="timeClick">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="商品名称">
                    <el-input v-model="form.goodsName" placeholder="请输入商品名称" ></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="form.goodsState" placeholder="请选择状态">
                    <el-option label="全部" value=""></el-option>
                    <el-option label="上架审核" value="0"></el-option>
                    <el-option label="上架" value="1"></el-option>
                    <el-option label="下架" value="2"></el-option>
                    <el-option label="上架驳回" value="3"></el-option>
                    <el-option label="下架审核" value="4"></el-option>
                    <el-option label="下架驳回" value="5"></el-option>
                    <el-option label="待入库" value="6"></el-option>
                    <el-option label="已入库" value="7"></el-option>
                    <el-option label="待上架" value="8"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="商品分类">
                    <el-select v-model="form.tradeType" placeholder="请选择商品分类">
                    <el-option :label="item.tradeTypeName" :value="item.tradeType" v-for="(item,index) in GoodsTradeTypeList" :key="index"></el-option>
                  
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="queryclcik">查询</el-button>
                </el-form-item>
            </el-form>
            
                    <el-table 
                    :data="tableData"
                    border
                    width='100%'
                    >
                    <el-table-column
                      prop="createTime"
                      label="添加商品时间"
                      >
                    
                    </el-table-column>
                    <el-table-column
                      prop="mainPic"
                      label="商品主图"
                    >
                    <template slot-scope="scope" >
                        <div style="text-align:center;" >
                           <img :src="scope.row.mainPic" alt="" style="width:100px;height:50px;" @click="enter1(scope.row)" >
                          
                       </div>
   
                   </template>
                    </el-table-column>
                    <el-table-column
                      prop="goodsNo"
                      label="商品编码"
                     >
                    </el-table-column>
                    <el-table-column
                    prop="tradeTypeName"
                    label="商品分类"
                   >
                  
                  </el-table-column>
                    <el-table-column
                      prop="name"
                      label="商品名称"
                      >
                    </el-table-column>
                    <el-table-column
                      prop="price"
                      label="上架价格/元"
                      >
                    </el-table-column>
                    <el-table-column
                      prop="unit"
                      label="计量单位"
                      >
                    </el-table-column>
                    <el-table-column
                      prop="inventory"
                      label="总库存量"
                     >
                     <template slot-scope="scope">
                        <el-button @click="seeStock(scope.row)" type="text">{{scope.row.inventory}}</el-button>
                     </template>
                    </el-table-column>
                    <el-table-column
                      prop="remain"
                      label="剩余库存量"
                      >
                    </el-table-column>
                        <el-table-column
                        prop="state"
                        label="状态"
                        >
                        <template  slot-scope="scope">
                            <div>{{statequery(scope.row.state)}}</div>
                        </template>
                    </el-table-column>
                  
                    <el-table-column
                    prop="state"
                    label="操作"
                    >
                    <template  slot-scope="scope">
                        <div>

                             <!-- 下架2 -->
                            <div v-if="scope.row.state == 2">
                                <el-button  type="text" size="small"  @click="handleClick(scope.row)" >查看</el-button>
                                <el-button type="text" size="small" @click="editclick(scope.row)" >修改</el-button>
                                <el-button type="text" size="small" @click="shelfup(scope.row)" >上架</el-button>
                                <el-button type="text" size="small" @click="handleDel(scope.row)">删除</el-button>
                            </div>
                             <!-- 上架审核0 -->
                            <div v-if="scope.row.state == 0">
                                    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                            </div>
                            <!-- 已上架1 -->
                            <div v-if="scope.row.state == 1">
                                    <el-button @click="handleClick(scope.row)" type="text" size="small" >查看</el-button>
                                    <el-button type="text" size="small" @click="editclick(scope.row)">修改</el-button>
                            </div>
                              <!-- 上架驳回3 -->
                            <div v-if="scope.row.state == 3">
                                    <el-button @click="handleClick(scope.row)" type="text" size="small" >查看</el-button>
                                    <el-button type="text" size="small" @click="editclick(scope.row)" >修改</el-button>
                                    <el-button type="text" size="small" @click="shelfup(scope.row)" >上架</el-button>
                                    <!-- <el-button type="text" size="small" @click="handleDel(scope.row)">删除</el-button> -->
                                    <el-button type="text" size="small" @click="seeReason(scope.row,1)">查看原因</el-button>
                                    
                            </div>
                            <!-- 下架审核4 -->
                            <div v-if="scope.row.state == 4">
                                    <el-button @click="handleClick(scope.row)" type="text" size="small" >查看</el-button>
                           </div> 
                           <!-- 下架驳回5 -->
                            <div v-if="scope.row.state == 5">
                                    <el-button @click="handleClick(scope.row)" type="text" size="small" >查看</el-button>
                                    <el-button type="text" size="small" @click="seeReason(scope.row)">查看原因</el-button>
                                    <el-button type="text" size="small" @click="shelfdown(scope.row,2)">下架</el-button>
                            </div>
                            <!-- 入库 -->
                            <div v-if="scope.row.state == 6">
                                    <el-button type="text" size="small" @click="Warehousing(scope.row)" >入库</el-button>
                                  
                                    <el-button @click="handleClick(scope.row)" type="text" size="small" >查看</el-button>
                                    <el-button type="text" size="small" @click="editclick(scope.row)" >修改</el-button>
                                    <el-button type="text" size="small" @click="handleDel(scope.row)">删除</el-button>
                              </div>
                              <!-- 待上架8 -->
                              <div v-if="scope.row.state == 8">
                                    <el-button type="text" size="small" @click="shelfup(scope.row)" >上架</el-button>
                                    <el-button @click="handleClick(scope.row)" type="text" size="small" >查看</el-button>
                              </div>
                        </div>
                    </template>
                </el-table-column>
                  </el-table>
                  <div>
                        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" 
                        :current-page="page.current" 
                        :page-sizes="[5,10,20,30,40]" 
                        :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="page.total">
                        </el-pagination>
                  </div>
                  <el-dialog
                    title="查看原因"
                    :visible.sync="dialogVisible"
                    width="30%"
                   >
                    <span>{{reason}}</span>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                    </span>
                 </el-dialog>
                 <el-dialog
                    title="提示"
                    :visible.sync="imgVisible"
                    width="1000px"
                    >
                    <div style="text-align: center;"><img :src="imgsrc" alt="" style="width:692px;height:290px;"></div>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="imgVisible = false">取 消</el-button>
                        <el-button type="primary" @click="imgVisible = false">确 定</el-button>
                    </span>
                    </el-dialog>
                   
            </div>
    </template>
    <script>
            export default {
              data() {
                return {
                  form: {
                    goodsName: '',
                    goodsState: '',
                    goodsType:1,
                    startTime:'',
                    endTime:'',
                    tradeType:'',
                    currentPage:1,
                    pageSize:10
                  },
                  arrTime:'',
                  page:{
                      current:1,
                      pageSize:10,
                      total:null
                  },
                  tableData: [],
                    
                    dialogVisible:false,
                    imgVisible:false,
                    params:{
                        goodsNo:'',
                        state:'',
                        inventory:'',
                        remain:'',
                        delFlag:''
                    },
                    imgsrc:'',
                    reason:'',
                    meunId:this.$route.query.menuId,
                    GoodsTradeTypeList:[]
                }
              },
              computed: {
                
              },
              methods: {
                tradeType(id){
                    let params = '';
                    switch(id){
                        case 1:
                        params = '活期交易商品';
                        break;
                        case 2:
                        params = '定期交易商品';
                        break;
                        default:

                    }
                    return params
                },
                  //
                  async getGoodsTradeTypeList(state){
                    let {data} = await this.$post({
                        api:'/api/goods/getGoodsTradeTypeList',
                        
                    })
                    if(data.code === 0){
                        this.GoodsTradeTypeList = data.data
                        console.log(data)
                    }
                },
                async listButtons(state){
                    let {data} = await this.$post({
                        api:'/menu/listButtons',
                        data:{
                            roleId:JSON.parse(localStorage.getItem('userInfo')).userId,
                            pid:this.meunId,
                            state:state
                        }
                    })
                    if(data.code === 0){
                        
                        // console.log(data)
                    }
                },
                async initData(){
                    let {data} = await this.$post({
                        api:'/api/goods/getGoodsList',
                        data:this.form
                    })
                    if(data.code === 0){
                        this.tableData = data.data.list;
                        this.page.total = data.data.total;
                        this.page.pageSize = data.data.pageSize;
                        this.page.current = data.data.pageNum;
                        // console.log(data)
                    }
                },
                //上架，下架 ，修改
            async updateGoodsNo(){
                if(this.params.delFlag){
                    let {data} = await this.$post({
                    api:'/api/goods/updateGoodsNo',
                        data:{
                            goodsNo:this.params.goodsNo,
                            state:this.params.state,
                            delFlag:this.params.delFlag
                        }
                    })
                    if(data.code === 0){
                        this.$message({
                            type: 'success',
                            message: '删除成功'
                        });
                        this.initData();
                        console.log(data)
                    }
                }else if(this.params.state === 1){
                    let {data} = await this.$post({
                    api:'/api/goods/updateGoodsNo',
                        data:{
                            goodsNo:this.params.goodsNo,
                            state:this.params.state,
                            delFlag:this.params.delFlag
                        }
                    })
                    if(data.code === 0){
                        this.$message({
                            type: 'success',
                            message: '上架成功'
                        });
                        this.initData();
                        console.log(data)
                    }
                }else if(this.params.state === 2){
                    let {data} = await this.$post({
                    api:'/api/goods/updateGoodsNo',
                        data:{
                            goodsNo:this.params.goodsNo,
                            state:this.params.state,
                            delFlag:this.params.delFlag
                        }
                    })
                    if(data.code === 0){
                        this.$message({
                            type: 'success',
                            message: '下架成功'
                        });
                        this.initData();
                        console.log(data)
                    }
                }
                
            },
                statequery(n){
                    this.listButtons(n);
                    
                    let params = ''
                    switch (n){
                        case 0:
                        params = '上架审核';
                        break;
                        case 1:
                        params = '上架';
                        break;
                        case 2:
                        params = '下架';
                        break;
                        case 3:
                        params = '上架驳回';
                        break;
                        case 4:
                        params = '下架审核';
                        break;
                        case 5:
                        params = '下架驳回';
                        break;
                        case 6:
                        params = '待入库';
                        break;
                        case 7:
                        params = '已入库';
                        break;
                        case 8:
                        params = '待上架';
                        break;
                        default:
                    }
                    return params
                },
                //查看
                handleClick(row) {
                    this.$router.push({path:'/seegoods',query:{goodsNo:row.goodsNo,free:1}})
                    console.log(row);
                },
                //查看原因
                seeReason(row,state){
                    this.dialogVisible = true;
                    console.log(state)
                    let params = {
                        goodsNo:row.goodsNo,
                        type:state
                    }
                    this.getReason(params)
                },
                async getReason(params){
                
                    let {data} = await this.$post({
                        api:'/api/goods/getReason',
                        
                        data: params
                    });
                    if(data.code === 0){
                        this.reason = data.data
                    }else{
                        this.$message({
                                type: 'error',
                                message: data.msg
                            })  
                    }
                },
                //入库
                Warehousing(row){
                    this.$router.push({path:'/storage',query:{goodsNo:row.goodsNo}})
                },
                //上架
                shelfup(row){
                   this.params.goodsNo = row.goodsNo;
                   this.params.state = 1;
                    this.$confirm('确认要上架此商品吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                    }).then(() => {
                        this.updateGoodsNo()
                    // this.$message({
                    //     type: 'success',
                    //     message: '删除成功!'
                    // });
                    }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });          
                    });
                },
                //下架
                shelfdown(row){
                    this.params.goodsNo = row.goodsNo;
                   this.params.state = 2;
                    this.$confirm('确认要下架此商品吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                    }).then(() => {
                        this.updateGoodsNo()
                    }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });          
                    });
                },
                //删除
                handleDel(row){
                    this.params.goodsNo = row.goodsNo;
                    this.params.delFlag = 1
                    this.$confirm('确认要删除此商品吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                    }).then(() => {
                        this.updateGoodsNo()
                    }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
                    });
                },
                
                handleSizeChange(val) {
                    this.form.pageSize = val;
                    this.initData()
                    
                },
                handleCurrentChange(val) {
                    this.form.currentPage = val;
                    this.initData()
                    
                },
                enter(column){
                    this.imgVisible = false;
                    // console.log(column)
                },
                enter1(row){
                    this.imgVisible = true;
                    this.imgsrc = row.mainPic;
                    // console.log(row)
                },
                leave(){
                    console.log('enenen')
                    // this.imgVisible = false; 
                },
                timeClick(arr){
                 
                  if(arr == null){
                    this.form.startTime = '';
                    this.form.endTime = ''
                  }else{
                    this.form.startTime = arr[0];
                    this.form.endTime = arr[1];
                  }
                    console.log(arr)
                },
                editclick(row){
                    this.$router.push({path:'/freeaddgoods',query:{goodsNo:row.goodsNo,id:1,state:row.state}})
                    // this.$router.push('addgoods?id=1')
                    
                },
                queryclcik(){
                    this.initData()
                },
                seeStock(row){
                    this.$router.push({path:'/rrint',query:{id:row.goodsNo}})
                }
              },
              mounted () {
                  this.initData();
                  this.getGoodsTradeTypeList();
                  console.log(this.$route.query,'query')
              }
            }
          </script>